import cn from "classnames";

import { Button } from "@/ui/Button/Button";
import {
  CommonModal,
  CommonModalPropsI,
} from "@/ui/modals/CommonModal/CommonModal";

import React from "react";
import cls from "./ConfirmModal.module.scss";

interface PropsI extends CommonModalPropsI {
  title: string;
  text?: string | React.ReactNode;
  confirmText: string;
  cancelText: string;
  onButtonClick: (confirmed: boolean) => void;
  confirmDisabled?: boolean;
}

export const ConfirmModal: React.FC<PropsI> = ({
  isOpen,
  close,
  rootClass,
  containerClass,
  title,
  text,
  confirmText,
  cancelText,
  onButtonClick,
  confirmDisabled,
}) => {
  return (
    <CommonModal
      isOpen={isOpen}
      close={close}
      rootClass={rootClass}
      containerClass={cn(containerClass, cls.container)}
    >
      <h2 className={cls.title}>{title}</h2>
      {text && <p className={cls.text}>{text}</p>}
      <div className={cls.buttons}>
        <Button variant="stroke" onClick={() => onButtonClick(false)}>
          {cancelText}
        </Button>
        <Button onClick={() => onButtonClick(true)} disabled={confirmDisabled}>
          {confirmText}
        </Button>
      </div>
    </CommonModal>
  );
};

ConfirmModal.displayName = "ConfirmModal";
ConfirmModal.defaultProps = {
  text: undefined,
};
